<template>
	<div>
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-button v-if="defaultExpandAll" size="small" type="default" @click="collapseOrExpand()" icon="refresh">折叠所有</el-button>
			<el-button v-if="!defaultExpandAll" size="small" type="default" @click="collapseOrExpand()" icon="refresh">展开所有</el-button>
		</el-col>
		<el-table :data="data" border style="width: 100%" :row-style="showTr">
			<el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" show-overflow-tooltip>
				<template scope="scope">
					<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
					<button class="el-button el-button--default el-button--small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
						<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
						<i v-if="scope.row._expanded" class="el-icon-minus"></i>
					</button>
					<span v-else-if="index===0" class="ms-tree-space"></span>
	
					<span v-if="column.dataIndex == 'isleaf'">
						{{ scope.row[column.dataIndex] == 1 ? '菜单组' : '项' }}
					</span>
					<span v-if="column.dataIndex == 'loadflag'">
						{{ scope.row[column.dataIndex] == 1 ? '是' : '否' }}
					</span>
					<span v-if="column.dataIndex != 'isleaf' && column.dataIndex != 'loadflag'">
						{{ scope.row[column.dataIndex] }}
					</span>
	
	
				</template>
			</el-table-column>
			<el-table-column label="操作" v-if="treeType === 'normal'" width="260">
				<template scope="scope">
	
					<el-button v-if="scope.row.menuid == 1 || scope.row.menuid == 11" disabled="disabled" type="button" class="el-button el-button--default el-button--small">编辑</el-button>
					<el-button v-if="scope.row.menuid != 1 && scope.row.menuid != 11" type="button" class="el-button el-button--default el-button--small" @click="handleEdit(scope.row)">编辑</el-button>
	
					<!-- <el-button v-if="scope.row.menuid == 1 || scope.row.menuid == 11" disabled="disabled" size="small" type="danger">删除</el-button>   -->
					<el-button v-if="scope.row.menuid != 1 && scope.row.menuid != 11" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
	
					<!-- <el-button v-if="scope.row.menuid == 11" disabled="disabled" type="button" class="el-button el-button--success el-button--small">添加下级</el-button> -->
					<el-button v-if="scope.row.menuid != 11 && scope.row.isleaf == '1'" type="button" class="el-button el-button--success el-button--small" @click="handleAdd(scope.row)">添加下级</el-button>
				</template>
			</el-table-column>
		</el-table>
	
		<MenuEdit v-if="showEditDialog"></MenuEdit>
		<MenuAdd v-if="showAddDialog"></MenuAdd>
	
	</div>
</template>

<script>
import DataUtils from "../../js/production/datatranslate"
import MenuEdit from "./MenuEdit"
import MenuAdd from "./MenuAdd"
export default {
	components: {
		MenuEdit,
		MenuAdd,
	},
	data() {
		return {
			columns: [
				{
					text: '中文名称',
					dataIndex: 'menuname'
				},
				{
					text: '英文名称',
					dataIndex: 'menunameen'
				},
				{
					text: '路由地址',
					dataIndex: 'menuurl'
				},
				{
					text: '类型',
					dataIndex: 'isleaf'
				},
				{
					text: '图标',
					dataIndex: 'icon'
				},
				{
					text: '是否单独页面',
					dataIndex: 'loadflag'
				},
				// {  
				//   text: 'Target',  
				//   dataIndex: 'target'  
				// },  
				// {  
				//   text: 'Loadflag',  
				//   dataIndex: 'loadflag'  
				// },  
				// {  
				//   text: 'Orderid',  
				//   dataIndex: 'orderid'  
				// }
			],
			data: [],
			treeStructure: true,
			defaultExpandAll: false,
			treeType: 'normal',
			showEditDialog: false,
			showAddDialog: false,
			rowdata: {},
		}
	},
	mounted() {
		this.queryTree()
	},
	filters: {
		test() {
		}
	},
	methods: {
		queryTree() {
			let vm = this;
			$.ajax({
				type: 'POST',
				url: "/soa/menu/query",
				dataType: 'json',
				success: function (data) {

					let treeData = [];
					let children = []

					vm.convert(data, children);

					treeData.push(data);

					vm.data = DataUtils.treeToArray(treeData, null, null, vm.defaultExpandAll);
				}
			});
		},
		convert(menu, allChildren) {
			if (menu.children.length > 0) {
				for (let i = 0; i < menu.children.length; i++) {
					let children = []
					allChildren.push(menu.children[i]);
					this.convert(menu.children[i], children);
				}
			}
		},
		// 显示行  
		showTr: function (row, index) {
			let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
			row._show = show
			return show ? '' : 'display:none;'
		},
		// 展开下级  
		toggle: function (trIndex) {
			let record = this.data[trIndex]
			record._expanded = !record._expanded
		},
		// 显示层级关系的空格和图标  
		spaceIconShow(index) {
			if (this.treeStructure && index === 0) {
				return true
			}
			return false
		},
		// 点击展开和关闭的时候，图标的切换  
		toggleIconShow(index, record) {
			if (this.treeStructure && index === 0 && record.children && record.children.length > 0) {
				return true
			}
			return false
		},
		handleAdd(row) {
			console.log(row);
			this.rowdata = row;
			this.showAddDialog = true;
		},
		handleDelete(row) {
			this.$confirm('此操作将永久删除菜单【' + row.menuname + '】, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'error'
			}).then(() => {

				let vm = this;
				$.ajax({
					type: 'POST',
					url: "/soa/menu/del",
					data: {
						menuid: row.menuid,
					},
					dataType: 'json',
					success: function (data) {
						vm.queryTree();
					}
				});

				this.$message({
					type: 'success',
					message: '删除成功!'
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				})
			})
		},
		handleEdit(row) {
			this.rowdata = row;
			this.showEditDialog = true;
		},
		collapseOrExpand() {
			this.defaultExpandAll = this.defaultExpandAll == true ? false : true;
			this.queryTree()
		}

	}
}
</script>

<style scoped>
.ms-tree-space {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	width: 18px;
	height: 14px;
}

.ms-tree-space::before {
	content: ""
}
</style> 